<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="myDiv">哈哈</div>
<div id="output">移动</div>
<script>
    /*
        看来也是废弃了
      1.  orientationchange 事件
             苹果公司在移动 Safari 浏览器上创造了 orientationchange 事件
            每当用户旋转设备改变了模式，就会触发 orientationchange 事件
     */
    window.addEventListener("load", (event) => {
        let div = document.getElementById("myDiv");
        div.innerHTML = "Current orientation is " + window.orientation;
        window.addEventListener("orientationchange", (event) => {
            div.innerHTML = "Current orientation is " + window.orientation;
        });
    });

    /*
        2.deviceorientation 事件
            如果可以获取设备的加速计信息，
 而且数据发生了变化，这个事件就会在 window 上触发
     */

    /*
        3.devicemotion 事件
            这个事件用于提示设备实际上在移动， 而不仅仅是改变了朝向。例如，devicemotion 事件可以用来确定设备正在掉落或者正拿在一个行走的 人手里。
     */
    window.addEventListener("devicemotion", (event) => {
        let output = document.getElementById("output");
        if (event.rotationRate !== null) {
            output.innerHTML += `Alpha=${event.rotationRate.alpha}` + `Beta=${event.rotationRate.beta}` +
                `Gamma=${event.rotationRate.gamma}`;
        }
    });
</script>
</body>
</html>